<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Button-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Ladda按钮加载进度插件</h1>
        <section class="markdown">
            <p>Ladda是一款内置Loading指示器和进度条的提交js按钮特效插件。该js按钮特效用于制作提交按钮，在点击按钮后，按钮上会出现无限循环的Loading指示器和加载进度条效果。这种设计大大增强了用户的体验性。</p>
            <!-- <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2> -->
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    
    </section>
    <div class="container">

      <div class="row">

        <div class="col-md-6 col-md-offset-3">

          <h1>Ladda UI for Bootstrap 3</h1>

    

          <h2>Demo <small>点击按钮查看loading效果</small></h2>

        </div>

      </div>

      <div class="row">

        <div class="col-md-6 col-md-offset-3 text-center">

          <p>

            <button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>



            <button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>



            <button class="btn btn-primary ladda-button" data-style="expand-up"><span class="ladda-label">expand-up</span></button>



            <button class="btn btn-primary ladda-button" data-style="expand-down"><span class="ladda-label">expand-down</span></button>

          </p>

        </div>

      </div>

      <div class="row">

        <div class="col-md-6 col-md-offset-3 text-center">

          <p>

            <button class="btn btn-info ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>



            <button class="btn btn-info ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span></button>

          </p>

        </div>

      </div>

      <div class="row">

        <div class="col-md-6 col-md-offset-3 text-center">

          <p>

            <button class="btn btn-warning ladda-button" data-style="slide-left"><span class="ladda-label">slide-left</span></button>



            <button class="btn btn-warning ladda-button" data-style="slide-right"><span class="ladda-label">slide-right</span></button>



            <button class="btn btn-warning ladda-button" data-style="slide-up"><span class="ladda-label">slide-up</span></button>



            <button class="btn btn-warning ladda-button" data-style="slide-down"><span class="ladda-label">slide-down</span></button>

          </p>

          <p><button class="btn btn-warning ladda-button" data-style="contract"><span class="ladda-label">contract</span></button></p>

        </div>

      </div>

      <div class="row">

        <div class="col-md-6 col-md-offset-3 text-center progress-demo">

          <p>Built-in progress bar</p>

          <p>

            <button class="btn btn-danger ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>



            <button class="btn btn-danger ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>

            

            <button class="btn btn-danger ladda-button" data-style="contract"><span class="ladda-label">contract</span></button>

          </p>

        </div>

      </div>

      <div class="row">

        <div class="col-md-6 col-md-offset-3 text-center">

          <p>Sizes</p>

          <p>

            <button class="btn btn-primary btn-xs ladda-button" data-style="expand-right" data-size="xs"><span class="ladda-label">extra small</span></button>



            <button class="btn btn-primary btn-sm ladda-button" data-style="expand-right" data-size="s"><span class="ladda-label">small</span></button>

            

            <button class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">large</span></button>

          </p>

        </div>

      </div>



      <div class="row">

        <div class="col-md-12">

          <h2>Usage:</h2>

          <hr>

          <p>Include the CSS and Javascript for Spin.js and Ladda effect:</p>

          <pre><code class="language-markup">&lt;link rel="stylesheet" href="dist/ladda-themeless.min.css"&gt;

&lt;script src="dist/spin.min.js"&gt;&lt;/script&gt;

&lt;script src="dist/ladda.min.js"&gt;&lt;/script&gt;</code></pre>

          <p>Then to produce a button with the Ladda effect:</p>

          <pre><code class="language-markup">&lt;button class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/button&gt;</code></pre>

          <p>Or using &quot;a&quot; tag:</p>

          <pre><code class="language-markup">&lt;a href="#" class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/a&gt;</code></pre>

          <p>You can choose the style of the effect by setting the <code>data-style</code> attribute:</p>

          <pre><code class="language-markup">data-style="expand-left"

data-style="expand-left"

data-style="expand-right"

data-style="expand-up"

data-style="zoom-in"

data-style="zoom-out"

data-style="slide-left"

data-style="slide-right"

data-style="slide-up"

data-style="slide-down"

data-style="contract"</code></pre>

          <p>You can choose the size of the spinner by setting the <code>data-size</code> attribute:</p>

          <pre><code class="language-markup">data-size="xs"

data-size="s"

data-size="l"           

</code></pre>

          <p>You can choose the color of the spinner by setting the <code>data-spinner-color</code> attribute (HEX code):</p>

          <pre><code class="language-markup">data-spinner-color="#FF0000"</code></pre>



          <h2>Control the UI state with Javascript:</h2>

          <p>To activate the effect you can bind Ladda to all buttons that submit a form</p>

          <pre><code class="language-javascript">Ladda.bind( 'input[type=submit]' );</code></pre>

          <p>When using AJAX forms, you can use the following syntax:</p>

          <pre><code class="language-markup">&lt;a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"&gt;&lt;span class="ladda-label"&gt;Submit form&lt;/span&gt;&lt;/a&gt;</code></pre>

          <pre><code class="language-javascript">$(function() {

  $('#form-submit').click(function(e){

    e.preventDefault();

    var l = Ladda.create(this);

    l.start();

    $.post("your-url", 

        { data : data },

      function(response){

        console.log(response);

      }, "json")

    .always(function() { l.stop(); });

    return false;

  });

});</code></pre>

        <p>Other methods available through Javascript</p>

        <pre><code class="language-javascript">l.stop();

l.toggle();

l.isLoading();

l.setProgress( 0-1 );</code></pre>



        </div>

      </div>  



    </div>



    <script src="dist/lib/bootstrap/bootstrap-ladda/spin.min.js"></script>

    <script src="dist/lib/bootstrap/bootstrap-ladda/ladda.js"></script>



    <script>



      // Bind normal buttons

      Ladda.bind( 'div:not(.progress-demo) button', { timeout: 2000 } );



      // Bind progress buttons and simulate loading progress

      Ladda.bind( '.progress-demo button', {

        callback: function( instance ) {

          var progress = 0;

          var interval = setInterval( function() {

            progress = Math.min( progress + Math.random() * 0.1, 1 );

            instance.setProgress( progress );



            if( progress === 1 ) {

              instance.stop();

              clearInterval( interval );

            }

          }, 200 );

        }

      } );



      // You can control loading explicitly using the JavaScript API

      // as outlined below:



      // var l = Ladda.create( document.querySelector( 'button' ) );

      // l.start();

      // l.stop();

      // l.toggle();

      // l.isLoading();

      // l.setProgress( 0-1 );



    </script>
</article>